<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户登录</title>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/util.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            background-image: url("img/bg.jpg");
        }

        #app {
            border-radius: 6px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 2rem;
            width: fit-content;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;font-weight: bold;font-size: 30px;margin-bottom: 2rem">登录页面</div>
    <el-form :model="loginFrom" class="demo-dynamic" id="loginForm"
             label-width="100px">
        <el-form-item label="用户名">
            <el-input name="username" v-model="loginFrom.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input name="password" type="password" v-model="loginFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" style="height: 2rem">
            <div style="display: flex;align-items: center;">
                <el-input name="userCode" style="width: 6rem" type="text" v-model="loginFrom.userCode"></el-input>
                <img id="codeImg" onclick="refresh()"
                     style="height: 2rem;border-radius: 4px;margin-left: 1rem;width: 6rem;">
                <el-link href="#" onclick="refresh()" style="margin-left: 1rem" type="primary">刷新</el-link>
            </div>
            <br/>
        </el-form-item>
        <el-form-item label="用户类型">
            <el-select clearable name="role" placeholder="请选择" v-model="role">
                <el-option
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        v-for="item in roles">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button id="loginBtn" style="margin-top: 1rem" type="primary">登录</el-button>
        </el-form-item>
        <el-link href="register.html" style="position: absolute;right: 1rem;bottom: 2rem" type="primary">
            没有账号？立即注册
        </el-link>
    </el-form>
    <!--    <form id="loginForm">-->
    <!--        账号：<input name="username" type="text"/><br/>-->
    <!--        密码：<input name="password" type="password"/><br/>-->
    <!--        验证码：<input name="userCode" type="text"/><img height="30px" id="codeImg" onclick="refresh()" width="120px"><a-->
    <!--            href="#" onclick="refresh()">刷新</a><br/>-->
    <!--        记住我：<input name="rememberMe" type="checkbox"/><br/>-->
    <!--        角色：-->
    <!--        <select name="role">-->
    <!--            <option value="student">学生</option>-->
    <!--            <option value="teacher">老师</option>-->
    <!--            <option value="admin">管理员</option>-->
    <!--        </select>-->
    <!--        <br/>-->
    <!--        <input id="loginBtn" type="button" value="登录"/>-->
    <!--        <input onclick="goWelcome()" type="button" value="返回"/>-->
    <!--    </form>-->
</div>
<script type="text/javascript">
    function goWelcome() {
        window.location = "welcome.html";
    }

    const app = new Vue({
        el: "#app",
        data: {
            loginFrom: {
                username: "",
                password: "",
                userCode: "",
            },
            role: "student",
            roles: [
                {
                    value: "student",
                    label: "学生"
                },
                {
                    value: "teacher",
                    label: "老师"
                },
                {
                    value: "admin",
                    label: "管理员"
                }
            ]
        }
    })
    if (isLogin()) {
        app.$message.error("您已登录")
        setTimeout(() => {
            location.href = 'index.html'
        }, 500)
    }
    img = document.getElementsByTagName("img")[0];

    function refresh() {
        img.src = "user?action=doDrawCode&" + new Date();
    }

    $(function () {
        $("#codeImg").attr("src", "user?action=doDrawCode&" + new Date());
        $("#loginBtn").click(function () {
            $("#loginForm").serialize()

            let dataStr = $("#loginForm").serialize().replace(/role=([^&]+)/g, `role=${app.$data.role}`);
            $.ajax(
                {
                    type: "post",
                    url: "user?action=doLogin",
                    data: dataStr,
                    async: true,
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (res) {
                        res = JSON.parse(res);

                        if (res.code == 1) {
                            app.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            setTimeout(() => {
                                window.location = "index.html";
                            }, 1000)

                            localStorage.setItem("user", JSON.stringify(res.data));
                        } else {
                            app.$message.error(res.msg);
                        }
                    }
                }
            )
        })
    })
</script>
</body>
</html>